/**
 * 类组件-生命周期
 * 1. 挂载时（创建时）
 * 执行顺序：1. 执行constructor()=>new 实例化 2. render()=》渲染模版 3. componentDidMount()
 * 2. 更新时
 * 执行顺序：1. render()=>刷新页面 2. componentDidUpdate()=>更新完成执行
 * 3. 销毁时
 */

import React, { Component } from 'react'

// 子组件
class Child extends Component {
    // 组件销毁时执行
    componentWillUnmount() {
        console.log('组件销毁了！')
        // 作用：清除定时器/事件解绑
    }
    render() {
        return (
            <div>
                <h1>类子组件</h1>
            </div>
        )
    }
}
class App extends Component {
    constructor() {
        // 只执行一次
        super()
        console.log('1.执行constructor()=>new 实例化')
        // 作用：1. 定义state响应数据 2. 事件处理函数的this绑定
        this.state = {
            a: 0,
            // 是否显示
            isShow: false
        }
    }
    // 首次加载执行（一次）
    componentDidMount() {
        // 只执行一次
        console.log('3.组件已经显示到页面，componentDidMount')
        // 作用：1. 操作DOM 2. 发送ajax请求
    }
    // 更新了：就执行（多次）
    // prevProps 上一次的props值 prevState 上一次的state值
    componentDidUpdate = (prevProps, prevState) => {
        console.log('4. 组件更新了', prevProps, prevState)
        // 1. 操作DOM 2. 发送ajax请求
        // 不能在这里直接修改数据=>死循环
        // this.setState({
        //   a: 1
        // })
    }
    hAdd = () => {
        this.setState({
            a: Math.random() * 100,
            // 控制组件是否显示
            isShow: !this.state.isShow
        })
    }
    hForce = () => {
        this.forceUpdate()
    }
    render() {
        // 不能在这里直接修改数据=>死循环
        // this.setState({
        //   a: 1
        // })
        // 数据变化：多次执行
        console.log('2.render()=》渲染模版')
        const { a, isShow } = this.state
        return (
            <div>
                <h1>生命周期</h1>
                <p>{a}</p>
                <button onClick={this.hAdd}>点击加</button>
                <button onClick={this.hAdd}> 控制组件是否显示</button>
                <button onClick={this.hForce}>强制更新</button>
                <hr />
                {
                    isShow ? <Child /> : null
                }
            </div>
        )
    }
}
export default App